<template>
  <div>
    <center><h1>登录</h1></center>

    <a-tabs default-active-key="1">
      <a-tab-pane key="1" tab="复杂滑动">
        <a-form-item label="用户名" v-bind="formlayout">
          <a-input
            v-model="username"
            placeholder="请输入用户名"
            id="username"
          ></a-input>
        </a-form-item>

        <a-form-item label="密码" v-bind="formlayout">
          <a-input
            v-model="password"
            placeholder="请输入密码"
            id="password"
          ></a-input>
        </a-form-item>

        <a-form-item label="滑动验证码" v-bind="formlayout">
          <drag-verify-img-chip
            id="verify"
            ref="dragVerify"
            imgsrc="/static/titleimg.jpg"
            :isPassing.sync="isPassing"
            handlerIcon="fa fa-angle-double-right"
            successIcon="fa fa-check-circle-o"
            @passcallback="handlePass"
            @refresh="handleRefresh"
            :successText="success_text"
            :text="heandle_text"
          >
          </drag-verify-img-chip>
        </a-form-item>

        <a-button type="primary" @click="login">登录</a-button>
      </a-tab-pane>
      <a-tab-pane key="2" tab="简单滑动" force-render>
        <a-form-item label="用户名" v-bind="formlayout">
          <a-input
            v-model="username"
            placeholder="请输入用户名"
            id="username"
          ></a-input>
        </a-form-item>

        <a-form-item label="密码" v-bind="formlayout">
          <a-input
            v-model="password"
            placeholder="请输入密码"
            id="password"
          ></a-input>
        </a-form-item>

        <a-form-item label="滑动验证码" v-bind="formlayout">
          <drag-verify
            ref="dragVerify"
            :isPassing.sync="isPassing"
            text="请按住滑块拖动"
            successText="验证通过"
            handlerIcon="el-icon-d-arrow-right"
            successIcon="el-icon-circle-check"
          >
          </drag-verify>
        </a-form-item>

        <a-button type="primary" @click="login">登录</a-button>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import dragVerify from "vue-drag-verify2";
import dragVerifyImgChip from "vue-drag-verify-img-chip";
import { userlogin } from "./axios_http/api";

export default {
  data() {
    return {
      heandle_text: "请滑动验证码",
      success_text: "验证成功",
      isPassing: false,
      width: 300,
      height: 42,
      text: "请拖动滑块",
      username: "",
      password: "",
      // 表单样式
      formlayout: {
        // 标签
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        // 文本框
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
      },
      formauthcode: {
        // 标签
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        // 文本框
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 4 },
        },
      },

      // 按钮样式
      buttonlayout: {
        // 按钮
        wrapperCol: {
          xs: { span: 24, offset: 0 },
          sm: { span: 16, offset: 8 },
        },
      },
    };
  },
  components: {
    dragVerify,
    dragVerifyImgChip,
  },
  methods: {
    handleRefresh() {
      console.log(123);
    },
    handlePass() {
      console.log(this.isPassing);
    },

    login() {
      if (!this.isPassing) {
        return this.$message.info("请先通过验证");
      }
      if (!this.username || !this.password) {
        return this.$message.info("参数不齐");
      }
      let data = {
        username: this.username,
        password: this.password,
      };
      userlogin(data).then((resp) => {
        console.log(resp);
        localStorage.setItem("uid", resp.data.uid)
      });
    },
  },

  created() {},
};
</script>